<template>
  <div>
    <Nav></Nav>
    <div class="container-fluid" style="margin-top: 100px">
      <!-- 小插件 天气和播放器-->
      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-5 text-left">
          <div class="card shadow h-100">
            <div class="card-header bg-light text-center">天气预报</div>
            <div class="card-body text-center">
              <iframe
                allowtransparency="true"
                frameborder="0"
                width="565"
                height="98"
                scrolling="no"
                src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=0&d=3&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=565&h=98&align=center"
              ></iframe>
            </div>
          </div>
        </div>
        <div class="col-md-5 text-right">
          <div class="card shadow h-100">
            <div class="card-header bg-light text-center">音乐放松一下</div>
            <div class="card-body text-center">
              <iframe
                frameborder="no"
                border="0"
                marginwidth="0"
                marginheight="0"
                width="330"
                height="86"
                src="//music.163.com/outchain/player?type=2&id=2148433153&auto=0&height=66"
                allow="fullscreen"
              ></iframe>
              <!--						<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=4&id=961440256&auto=1&height=430"></iframe>-->
            </div>
          </div>
        </div>
        <div class="col-md-1"></div>
      </div>
      <!-- 用户人数  商品数  总销售量 总销售额  -->
      <div class="row" style="margin-top: 20px">
        <div class="col-md-1"></div>
        <div class="col-md-2">
          <div class="card">
            <div class="card-body text-center">
              <h1>{{ workStats.userCount }}</h1>
            </div>
            <div class="card-footer bg-light text-center">注册会员数</div>
          </div>
        </div>
        <div class="col-md-2">
          <div class="card">
            <div class="card-body text-center">
              <h1>{{ workStats.productCount }}</h1>
            </div>
            <div class="card-footer bg-light text-center">平台商品数</div>
          </div>
        </div>
        <div class="col-md-2">
          <div class="card">
            <div class="card-body text-center">
              <h1>{{ workStats.productSum }}</h1>
            </div>
            <div class="card-footer bg-light text-center">商品销售总量</div>
          </div>
        </div>
        <div class="col-md-2">
          <div class="card">
            <div class="card-body text-center">
              <h1>{{ workStats.money }}</h1>
            </div>
            <div class="card-footer bg-light text-center">平台销售总额(W)</div>
          </div>
        </div>
        <div class="col-md-2">
          <div class="card">
            <div class="card-body text-center">
              <h1>{{ workStats.vipCount }}</h1>
            </div>
            <div class="card-footer bg-light text-center">实时在线会员数</div>
          </div>
        </div>
        <div class="col-md-1"></div>
      </div>
      <!-- 看板 -->
      <div class="row" style="margin-top: 20px">
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <div class="row">
            <div class="col-md-6">
              <div class="card">
                <div class="card-header bg-light text-center">
                  商品访问占比分析
                </div>
                <div class="card-body">
                  <div class="ibox float-e-margins">
                    <div class="ibox-title">
                      <h5>
                        <span
                          style="font-size: 16px"
                          class="label label-success"
                          >商品访问量占比</span
                        >
                      </h5>
                    </div>
                    <div class="ibox-content">
                      <div
                        class="echarts"
                        id="userPie"
                        style="height: 300px"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--						柱状图-->
            <div class="col-md-6">
              <div class="card">
                <div class="card-header bg-light text-center">热卖商品分析</div>
                <div class="card-body">
                  <div class="ibox-title">
                    <h5>
                      <span style="font-size: 16px" class="label label-success"
                        >热点商品Top5</span
                      >
                    </h5>
                  </div>
                  <div class="ibox-content">
                    <div
                      class="echarts"
                      id="coursesBar"
                      style="height: 300px"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
            <!--						柱状图结束-->
          </div>
        </div>
        <div class="col-md-1"></div>
      </div>
      <!-- 看板 -->
      <div class="row" style="margin-top: 20px">
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <div class="row">
            <div class="col-md-6">
              <div class="card">
                <div class="card-header bg-light text-center">
                  热卖商品实时排行榜
                </div>
                <div class="card-body">
                  <table class="table table-condensed table-hover table-sm">
                    <thead>
                      <tr>
                        <th>排名</th>
                        <th>商品</th>
                        <th>价格</th>
                        <th>销售量</th>
                        <th>详情</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="hot in hotProduct" :key="hot.id">
                        <input
                          type="hidden"
                          name="id"
                          th:value="${productItem.id}"
                        />
                        <td>{{ hot.rank }}</td>
                        <td>{{ hot.productName }}</td>
                        <td>{{ hot.price }}</td>
                        <td>{{ hot.totalQuantity }}</td>
                        <td>
                          <a
                            class="btn btn-outline-success btn-sm"
                            href="#"
                            @click.prevent="viewDetails(hot.id)"
                            ><i class="fa fa-info"></i>查看</a
                          >
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card">
                <div class="card-header bg-light text-center">待补货商品</div>
                <div class="card-body">
                  <table class="table table-condensed table-hover table-sm">
                    <thead>
                      <tr>
                        <th>排名</th>
                        <th>商品</th>
                        <th>价格</th>
                        <th>库存</th>
                        <th>详情</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="short in shortProduct" :key="short.id">
                        <input
                          type="hidden"
                          name="id"
                          th:value="${productItem.id}"
                        />
                        <td>{{ short.rank }}</td>
                        <td>{{ short.productName }}</td>
                        <td>{{ short.price }}</td>
                        <td>{{ short.stock }}</td>
                        <!-- <td><a class="btn btn-outline-warning btn-sm" href="#" th:href="@{/Pinfo(id=${productItem.id})}"><i class="fa fa-info"></i>查看</a></td> -->
                        <td>
                          <a
                            class="btn btn-outline-warning btn-sm"
                            href="#"
                            @click.prevent="viewDetails(short.id)"
                            ><i class="fa fa-info"></i>查看</a
                          >
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="DataView">
import Nav from "../Nav.vue";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/font-awesome.css";
import "../../assets/js/echarts.min.js";
import "../../assets/js/jquery.min.js";
import "../../assets/js/echarts.min.js";

import { getWorkStats, hotProducts, shortProducts } from "../../api/product";
import { reactive, onMounted, ref } from "vue";
import router from "../../router/index";

const workStats = reactive({
  userCount: "",
  productCount: "",
  productSum: "",
  money: "",
  vipCount: "",
});
const getWorkStatsData = async () => {
  const res = await getWorkStats();
  if (res.data.code === 1) {
    Object.assign(workStats, res.data.data);
  }
};

const hotProduct = reactive([]);
const shortProduct = reactive([]);
const getHotProduct = async () => {
  const res = await hotProducts();
  if (res.data.code === 1) {
    hotProduct.splice(0, hotProduct.length, ...res.data.data);
  }
};
const getShortProduct = async () => {
  const res = await shortProducts();
  if (res.data.code === 1) {
    shortProduct.splice(0, shortProduct.length, ...res.data.data);
  }
};
const viewDetails = (id: number) => {
  router.push(`/productInfo/${id}`);
};

function getData1(){
	var pieChart = echarts.init(document.getElementById("userPie"));
			fetch('/api/echart/visitCounts')
					.then(response => response.json())
					.then(data => {

						var pieoption = {
							title: {
								text: '',
								x: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								x: 'left',
								data: data.legendData
							},
							calculable: true,
							series: [{
								name: '访问量',
								type: 'pie',
								radius: '55%',
								center: ['50%', '60%'],
								data: data.data
							}]
						};
						pieChart.setOption(pieoption);
					})
}
function getData2(){
	var barChart = echarts.init(document.getElementById("coursesBar"));
			fetch('/api/echart/getChartData')
					.then(response => response.json())
					.then(data => {
						var baroption = {
							title: {
								text: ''
							},
							tooltip: {
								trigger: 'axis'
							},
							legend: {
								data: ['访问量', '库存']
							},
							grid: {
								left: 50,
								x: 40,
								x2: 40,
								y2: 24
							},
							calculable: true,
							xAxis: [{
								axisLabel: {
									interval: 0,
									rotate: 0
								},
								data: data.categories
							}],
							yAxis: [{
								type: 'value'
							}],
							series: [
								{
									name: '访问量',
									type: 'bar',
									data: data.visits,
									markPoint: {
										data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
									}
								},
								{
									name: '库存',
									type: 'bar',
									data: data.stock,
									markPoint: {
										data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
									}
								}
							]
						};

						barChart.setOption(baroption);
					})
}

onMounted(() => {
  getWorkStatsData(), getHotProduct(), getShortProduct(),getData1(),getData2()
});
</script>

<style scoped></style>
